<template>
    <div class="phone-menu">
        <img src="../../assets/liyunxing.png" alt="" class="phone-menu-logo">
        <div class="phone-menu-header">
            <img src="../../assets/img/header/header.png" alt="">
            <h3>calmlyx</h3>
        </div>
        <ul class="phone-header-list">
            <router-link tag="li" to="/home">
                <i class="iconfont">&#xe61e;</i>
                <span>首页</span>
            </router-link>
            <router-link tag="li" to="/source">
                <i class="iconfont">&#xeeeb;</i>
                <span>资源</span>
            </router-link>
            <router-link tag="li" to="/me">
                <i class="iconfont">&#xe60b;</i>
                <span>关于</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: ""
}
</script>

<style>
    .phone-menu {
        width: 100%;
        height: 250px;
        background: url("../../assets/img/header/header-left.jpg");
        background-size: cover;
        background-position: 0 60%;
        border: 1px solid;
        position: relative;
    }
    .phone-menu-header {
    & > img {
          display: block;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          margin: 20px auto;
      }
    & > h3 {
          color: white;
          text-align: center;
      }
    }
    .phone-header-list {
        width: 75%;
        margin: 0 auto;
        display: flex;
        color: white;
        justify-content: space-around;
        font-size: 20px;
    i {
        font-size: 20px;
        margin-right: 10px;
    }
    }
    .phone-menu-logo {
        width: 80px;
        display: block;
        position: absolute;
        top: 10%;
        left: 5%;
    }

</style>
